/*
 * @description: 商城财务/支付宝
 * @Author: along
 * @Date: 2021-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container account-form">
        <!-- fail -->
        <div v-if="(alipay_flag === -1 || alipay_flag === 0) && audit_fail_reason.length > 0">
            <div class="container-fail">
                <i class="el-icon-warning" />
                <p
                    class="container-fail-text"
                    v-for="(item,index) in audit_fail_reason"
                    :key="index"
                >
                    {{ item }}
                </p>
            </div>
            <div class="container-fail-seat" />
        </div>

        <!-- title -->
        <div class="container-header">
            支付宝账户设置
        </div>

        <!-- step -->
        <div class="container-step">
            <el-steps
                :active="step"
                :align-center="true"
                process-status="wait"
            >
                <el-step
                    title="资料完善"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
                <el-step
                    title="支付宝签约"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
                <el-step
                    title="完成"
                    icon="icon-yuan-copy-copy-copy-copy iconfont"
                />
            </el-steps>
        </div>

        <!-- 支付宝账户设置流程 -->
        <div v-if="alipay_flag === 0">
            <!-- form -->
            <div class="container-form">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleFormAlipay"
                    label-width="100px"
                    :label-position="'top'"
                >
                    <div>
                        <div class="container-form-head">
                            <p class="container-form-head-title">
                                资料完善
                            </p>
                            <p class="container-form-head-desc">
                                根据支付宝官方的要求，请按以下提示进行资料的填写并提交
                            </p>
                        </div>

                        <!-- 主体类型 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 32 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                主体类型
                            </p>
                        </div>
                        <el-form-item
                            label="请选择您的主体类型"
                            prop="merchant_type"
                        >
                            <el-select
                                v-model="ruleForm.merchant_type"
                                placeholder="请选择"
                                class="container-form-input"
                                size="small"
                                clearable
                                @change="fnCheckType(ruleForm.merchant_type)"
                            >
                                <el-option
                                    v-for="item in organizationType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                            <el-popover
                                placement="right"
                                width="484"
                                trigger="hover"
                                popper-class="container-form-provide"
                            >
                                <p class="container-form-provide">
                                    <span>1、企业:</span>营业执照上的主体类型一般为有限公司、有限责任公司<br>
                                    <span>2、个体工商户:</span>营业执照上的主体类型一般为个体户、个体工商户、个体经营<br>
                                    <span>3、个人商户:</span>指无营业执照的商户<br>
                                </p>
                                <el-button
                                    slot="reference"
                                    type="text"
                                    class="container-form-tip"
                                >
                                    不知道选什么
                                </el-button>
                            </el-popover>
                        </el-form-item>

                        <!-- 商户信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 32 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                商户信息
                            </p>
                        </div>
                        <div
                            class="container-form-content"
                            style="margin-bottom:10px;margin-top:10px"
                        >
                            <el-form-item
                                label="商户名称"
                                prop="name"
                                class="container-form-content-input"
                                v-if="ruleForm.merchant_type == '01' || ruleForm.merchant_type == '07'"
                            >
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、请填写营业执照中的商家名称<br>
                                        2、个体工商户，不能以“公司”结尾<br>
                                        3、个体商户，若营业执照上商户名称为空或为“无”，请填写"个体户+经营者姓名"，如“个体户张三”
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        :style="{left: '63px'}"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                                <el-input
                                    v-model="ruleForm.name"
                                    size="small"
                                    placeholder="请填写商户名称"
                                    maxlength="128"
                                    show-word-limit
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item
                                label="商户别名"
                                prop="alias_name"
                                class="container-form-content-input"
                            >
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        请填写您的商户别名，比如：蚂蚁金服（杭州）网络技术有限公司的别名为：“支付宝”， 此别名将在支付完成页向买家展示
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        :style="{left: '62px'}"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                                <el-input
                                    v-model="ruleForm.alias_name"
                                    size="small"
                                    placeholder="请填写商户别名"
                                    maxlength="128"
                                    show-word-limit
                                    clearable
                                />
                            </el-form-item>
                            <el-form-item
                                label="商户经营类目"
                                prop="mcc"
                                class="container-form-content-input"
                                style="width:332px;"
                            >
                                <el-cascader
                                    v-model="mccData"
                                    :options="mccList"
                                    clearable
                                    filterable
                                    expand-trigger="click"
                                    @change="fnCheckMc(mccData)"
                                    :props="{
                                        label: 'name',
                                        value: 'code',
                                        children: 'children_list'
                                    }"
                                />
                            </el-form-item>
                            <div style="display:flex">
                                <el-form-item
                                    label="商户经营地址"
                                    prop="business_address_province_code"
                                    class="container-form-content-input"
                                    style="width:332px;margin-bottom:0"
                                >
                                    <el-cascader
                                        v-model="business_address"
                                        :options="businessList"
                                        clearable
                                        filterable
                                        placeholder="请选择公司省市区地址"
                                        expand-trigger="click"
                                        @change="fnGetAdress(business_address)"
                                        :props="{
                                            label: 'name',
                                            value: 'address_code',
                                            children: 'city_list'
                                        }"
                                    />
                                </el-form-item>
                                <el-form-item
                                    prop="business_address_address"
                                    class="container-form-content-input"
                                    style="width:696px;margin-top:57px"
                                >
                                    <el-input
                                        type="textarea"
                                        placeholder="请填写您营业执照上的地址"
                                        v-model="ruleForm.business_address_address"
                                        maxlength="256"
                                        show-word-limit
                                        :autosize="{ minRows: 4, maxRows: 10}"
                                    />
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 资质证书信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 32 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                资质证书信息
                            </p>
                        </div>
                        <div class="zw-hanle-wrap">
                            <el-form-item
                                label="商户证件类型"
                                prop="cert_type"
                                v-if="(ruleForm.merchant_type == '01' || ruleForm.merchant_type == '07') || (ruleForm.merchant_type == '06' && flag)"
                            >
                                <el-radio-group v-model="ruleForm.cert_type">
                                    <el-radio
                                        label="2011"
                                        class="zd-el-radio"
                                    >
                                        有社会信用代码
                                    </el-radio>
                                    <el-radio
                                        label="201"
                                        class="zd-el-radio"
                                    >
                                        无社会信用代码
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item
                                label="营业执照扫描件"
                                prop="cert_image_url"
                                v-if="(ruleForm.merchant_type == '01' || ruleForm.merchant_type == '07') || (ruleForm.merchant_type == '06' && flag)"
                            >
                                <div
                                    style="display:flex;align-items:center"
                                >
                                    <div class="container-form-upload">
                                        <img
                                            v-if="!ruleForm.cert_image_url"
                                            src="@/assets/image/upload.png"
                                            alt="加载失败"
                                            class="container-form-upload-img"
                                        >
                                        <img
                                            v-if="ruleForm.cert_image_url"
                                            :src="ruleForm.cert_image_url"
                                            class="container-form-upload-price"
                                        >
                                        <el-upload
                                            class="container-form-upload-change"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="fnUploadImage"
                                            accept="image/*"
                                            :multiple="false"
                                            v-if="update"
                                        />
                                        <div
                                            class="container-form-upload-create"
                                            v-if="ruleForm.cert_image_url"
                                        >
                                            <i
                                                class="el-icon-delete"
                                                @click="()=>{
                                                    ruleForm.cert_image_url = '';
                                                    this.update = false;
                                                    this.update = true;
                                                }"
                                            />
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnPreviewImg(ruleForm.cert_image_url)"
                                            />
                                        </div>
                                    </div>
                                    <el-popover
                                        placement="right"
                                        width="484"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            1、请上传营业执照的证件图片<br>
                                            2、请上传证件的彩色扫描件或彩色数码拍摄件，黑白复印件需加盖公章（公章信息需完整）<br>
                                            3、不得添加无关水印<br>
                                            4、需提供证件的正面拍摄件，完整、照面信息清晰可见。信息不清晰、扭曲、压缩变形、反光、不完整均不接受<br>
                                            5、不接受二次剪裁、翻拍、PS的证件照片
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                        >
                                            图片要求
                                        </el-button>
                                    </el-popover>
                                </div>
                            </el-form-item>
                            <div class="container-form-content">
                                <el-form-item
                                    label="营业执照上名称"
                                    prop="cert_name"
                                    class="container-form-content-input"
                                    v-if="ruleForm.merchant_type == '07'"
                                >
                                    <el-popover
                                        placement="right"
                                        width="272"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            请填写个体工商户营业执照上的名称
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            :style="{left: '110px'}"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.cert_name"
                                        size="small"
                                        placeholder="请填写营业执照上名称"
                                        maxlength="64"
                                        show-word-limit
                                        clearable
                                    />
                                </el-form-item>
                                <el-form-item
                                    :label="ruleForm.cert_type == '201' ? '营业执照编号' : '统一社会信用代码'"
                                    prop="cert_no"
                                    class="container-form-content-input"
                                    v-if="ruleForm.merchant_type == '01' || ruleForm.merchant_type == '07'"
                                >
                                    <el-popover
                                        placement="right"
                                        width="482"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            请填写营业执照编号/统一社会信用代码，须为15位数字或 18位数字|大写字母
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            :style="{left: '122px'}"
                                        >
                                            要求
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="ruleForm.cert_no"
                                        size="small"
                                        :placeholder="ruleForm.cert_type == '201' ? '请填写营业执照编号' : '请填写统一社会信用代码'"
                                        maxlength="20"
                                        show-word-limit
                                        clearable
                                    />
                                </el-form-item>
                            </div>
                            <div
                                class="zd-qualifications"
                            >
                                <!-- v-if="flag" -->
                                <p class="zd-qualifications-title">
                                    行业资质
                                </p>
                                <div
                                    v-for="(item,index) in ruleForm.qualifications"
                                    :key="index"
                                    class="qualifications-list"
                                >
                                    <div class="qualifications-list-left">
                                        <div class="container-form-content">
                                            <!-- prop="qualifications" -->
                                            <el-form-item
                                                label="行业资质类型"
                                                style="margin-right:24px"
                                            >
                                                <el-select
                                                    v-model="item.industry_qualification_type"
                                                    placeholder="请选择"
                                                    class="container-form-input"
                                                    size="small"
                                                    clearable
                                                >
                                                    <el-option
                                                        v-for="option in certList"
                                                        :key="option.type"
                                                        :label="option.name"
                                                        :value="option.type"
                                                    />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item
                                                label="行业资质图片"
                                            >
                                                <div
                                                    style="display:flex;align-items:center"
                                                    @click="()=>{
                                                        changeImgIndex = index;
                                                    }"
                                                >
                                                    <p class="container-form-titleDesc">
                                                        (请选择上传对应您所在行业的特殊资质)
                                                    </p>
                                                    <div class="container-form-upload">
                                                        <img
                                                            v-if="!item.industry_qualification_image_url"
                                                            src="@/assets/image/upload.png"
                                                            alt="加载失败"
                                                            class="container-form-upload-img"
                                                        >
                                                        <img
                                                            v-if="item.industry_qualification_image_url"
                                                            :src="item.industry_qualification_image_url"
                                                            class="container-form-upload-price"
                                                        >
                                                        <el-upload
                                                            class="container-form-upload-change"
                                                            action="https://jsonplaceholder.typicode.com/posts/"
                                                            list-type="picture-card"
                                                            :show-file-list="false"
                                                            :http-request="fnUploadImageFore"
                                                            accept="image/*"
                                                            :multiple="false"
                                                        />
                                                        <div
                                                            class="container-form-upload-create"
                                                            v-if="item.industry_qualification_image_url"
                                                        >
                                                            <i
                                                                class="el-icon-delete"
                                                                @click="()=>{
                                                                    item.industry_qualification_image_url = '';
                                                                    item.industry_qualification_image_oss_key = '';
                                                                    imageIndex = '';
                                                                }"
                                                            />
                                                            <i
                                                                class="el-icon-zoom-in"
                                                                @click="fnPreviewImg(item.industry_qualification_image_url)"
                                                            />
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                        </div>
                                    </div>
                                    <div
                                        class="qualifications-list-right"
                                        @click="fnRemoveQualification(index)"
                                        v-if="index > 0"
                                    >
                                        删除
                                    </div>
                                    <div
                                        class="qualifications-list-right"
                                        v-if="index == 0"
                                        style="opacity: 0"
                                    >
                                        删除
                                    </div>
                                </div>
                                <div
                                    class="zd-qualifications-add"
                                    @click="fnAddQualification()"
                                >
                                    <i class="el-icon-plus" />
                                    添加行业资质
                                </div>
                            </div>
                        </div>

                        <!-- 经营者/法人证件类型 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 32 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                经营者/法人证件类型
                            </p>
                        </div>
                        <div class="container-form-content">
                            <el-form-item
                                label="经营者/法人证件类型"
                                prop="legal_cert_type"
                                class="container-form-content-input"
                                style="width:332px"
                            >
                                <el-select
                                    v-model="ruleForm.legal_cert_type"
                                    placeholder="请选择"
                                    class="container-form-input"
                                    size="small"
                                    clearable
                                    filterable
                                    :disabled="certFlag"
                                    @change="()=>{
                                        this.ruleForm.legal_cert_front_image_url = '';
                                        this.ruleForm.legal_cert_front_image_oss_key = '';
                                        this.ruleForm.legal_name = this.ruleForm.legal_cert_no = '';
                                        this.ruleForm.legal_cert_back_image_url = '';
                                        this.ruleForm.legal_cert_back_image_oss_key = '';
                                    }"
                                >
                                    <el-option
                                        v-for="item in certTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </div>

                        <!-- 经营者/法人身份证信息 -->
                        <div v-if="ruleForm.legal_cert_type == '100'">
                            <div
                                class="container-form-head"
                                :style="{ paddingTop: 22 + 'px' }"
                            >
                                <p class="container-form-head-titles">
                                    经营者/法人身份证信息 {{ imageIndex }}
                                </p>
                            </div>
                            <div class="container-form-fix">
                                <p class="container-form-fix-title">
                                    上传身份证照片
                                </p>
                                <p class="container-form-fix-desc">
                                    (确保身份证边框完整、图像清晰、光线均匀)
                                </p>
                            </div>
                            <div style="display:flex;align-items:center">
                                <el-form-item
                                    prop="legal_cert_front_image_url"
                                    style="width:160px;margin-right:15px;"
                                >
                                    <div style="display:flex;align-items:center">
                                        <div
                                            class="container-form-card"
                                        >
                                            <img
                                                src="@/assets/image/card-border.png"
                                                alt="加载失败"
                                                class="container-form-card-border"
                                            >
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="ruleForm.legal_cert_front_image_url"
                                            >
                                                点击重新上传
                                            </p>
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="!ruleForm.legal_cert_front_image_url"
                                            >
                                                点击上传
                                                <span style="color:#20A0FF;font-size:14px;">
                                                    人像面
                                                </span>
                                            </p>
                                            <img
                                                v-if="!ruleForm.legal_cert_front_image_url"
                                                src="@/assets/image/carder-copy.png"
                                                alt="加载失败"
                                                class="container-form-card-img"
                                            >
                                            <img
                                                v-if="ruleForm.legal_cert_front_image_url"
                                                :src="ruleForm.legal_cert_front_image_url"
                                                class="container-form-card-price"
                                            >
                                            <el-upload
                                                class="container-form-card-change"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                list-type="picture-card"
                                                :show-file-list="false"
                                                :http-request="fnUploadImageTo"
                                                accept="image/*"
                                                :multiple="false"
                                                v-if="update"
                                            />
                                            <div
                                                class="container-form-card-create"
                                                v-if="ruleForm.legal_cert_front_image_url"
                                            >
                                                <i
                                                    class="el-icon-delete"
                                                    @click="()=>{
                                                        this.ruleForm.legal_cert_front_image_url = '';
                                                        this.update = false;
                                                        this.update = true;
                                                    }"
                                                />
                                                <i
                                                    class="el-icon-zoom-in"
                                                    @click="fnPreviewImg(ruleForm.legal_cert_front_image_url)"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    prop="legal_cert_back_image_url"
                                    style="width:160px"
                                >
                                    <div style="display:flex;align-items:center">
                                        <div
                                            class="container-form-card"
                                        >
                                            <img
                                                src="@/assets/image/card-border.png"
                                                alt="加载失败"
                                                class="container-form-card-border"
                                            >
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="ruleForm.legal_cert_back_image_url"
                                            >
                                                点击重新上传
                                            </p>
                                            <p
                                                style="color:#333;font-size:14px;"
                                                v-if="!ruleForm.legal_cert_back_image_url"
                                            >
                                                点击上传
                                                <span style="color:#20A0FF;font-size:14px;">
                                                    国徽面
                                                </span>
                                            </p>
                                            <img
                                                v-if="!ruleForm.legal_cert_back_image_url"
                                                src="@/assets/image/card-media.png"
                                                alt="加载失败"
                                                class="container-form-card-img"
                                            >
                                            <img
                                                v-if="ruleForm.legal_cert_back_image_url"
                                                :src="ruleForm.legal_cert_back_image_url"
                                                class="container-form-card-price"
                                            >
                                            <el-upload
                                                class="container-form-card-change"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                list-type="picture-card"
                                                :show-file-list="false"
                                                :http-request="fnUploadImageThree"
                                                accept="image/*"
                                                :multiple="false"
                                                v-if="update"
                                            />
                                            <div
                                                class="container-form-card-create"
                                                v-if="ruleForm.legal_cert_back_image_url"
                                            >
                                                <i
                                                    class="el-icon-delete"
                                                    @click="()=>{
                                                        this.ruleForm.legal_cert_back_image_url = '';
                                                        this.update = false;
                                                        this.update = true;
                                                    }"
                                                />
                                                <i
                                                    class="el-icon-zoom-in"
                                                    @click="fnPreviewImg(ruleForm.legal_cert_back_image_url)"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="container-form-content">
                                <el-form-item
                                    label="身份证姓名"
                                    prop="legal_name"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.legal_name"
                                        size="small"
                                        placeholder="请填写身份证姓名"
                                        maxlength="64"
                                        show-word-limit
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="身份证号码"
                                    prop="legal_cert_no"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.legal_cert_no"
                                        size="small"
                                        placeholder="请填写身份证号码"
                                        minlength="15"
                                        maxlength="18"
                                        show-word-limit
                                    />
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 经营者/法人其它类型证件信息 -->
                        <div v-if="ruleForm.legal_cert_type !== '100'">
                            <el-form-item
                                label="上传证件照片"
                                prop="legal_cert_front_image_url"
                            >
                                <div
                                    style="display:flex;align-items:center"
                                >
                                    <div class="container-form-upload">
                                        <img
                                            v-if="!ruleForm.legal_cert_front_image_url"
                                            src="@/assets/image/upload.png"
                                            alt="加载失败"
                                            class="container-form-upload-img"
                                        >
                                        <img
                                            v-if="ruleForm.legal_cert_front_image_url"
                                            :src="ruleForm.legal_cert_front_image_url"
                                            class="container-form-upload-price"
                                        >
                                        <el-upload
                                            class="container-form-upload-change"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="fnUploadImageTo"
                                            accept="image/*"
                                            :multiple="false"
                                            v-if="update"
                                        />
                                        <div
                                            class="container-form-upload-create"
                                            v-if="ruleForm.legal_cert_front_image_url"
                                        >
                                            <i
                                                class="el-icon-delete"
                                                @click="()=>{
                                                    this.ruleForm.legal_cert_front_image_url = '';
                                                    this.update = false;
                                                    this.update = true;
                                                }"
                                            />
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnPreviewImg(ruleForm.legal_cert_front_image_url)"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                            <div class="container-form-content">
                                <el-form-item
                                    label="证件姓名"
                                    prop="legal_name"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.legal_name"
                                        size="small"
                                        placeholder="请填写证件姓名"
                                        maxlength="64"
                                        show-word-limit
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="证件号码"
                                    prop="legal_cert_no"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="ruleForm.legal_cert_no"
                                        size="small"
                                        placeholder="请填写证件号码"
                                        minlength="15"
                                        maxlength="18"
                                        show-word-limit
                                    />
                                </el-form-item>
                            </div>
                        </div>

                        <!-- 商户联系人信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                商户联系人信息
                                <span style="color:#999;font-size:14px;margin-left:11px">
                                    商户联系人可接收日常重要管理信息，最好选择为商户法定代表人或负责人
                                </span>
                            </p>
                        </div>
                        <div class="zd-user">
                            <div
                                v-for="(option,index) in ruleForm.contact_info_arr_list"
                                :key="index"
                                class="zd-user-list container-form-content"
                            >
                                <el-form-item
                                    label="联系人类型"
                                    class="container-form-content-input"
                                    prop="contact_info_arr_list"
                                >
                                    <el-select
                                        v-model="option.type"
                                        placeholder="请选择"
                                        size="small"
                                        clearable
                                        style="width:100%"
                                    >
                                        <el-option
                                            v-for="item in arrList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="联系人姓名"
                                    prop="contact_info_arr_list"
                                    class="container-form-content-input"
                                >
                                    <el-input
                                        v-model="option.name"
                                        size="small"
                                        placeholder="请填写姓名"
                                        maxlength="128"
                                        show-word-limit
                                        clearable
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="联系人手机号"
                                    prop="contact_info_arr_list"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="306"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            该手机号用于接收支付宝支付的重要管理信息及日常操作验证码
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            :style="{left: '92px'}"
                                        >
                                            须知
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="option.phone"
                                        size="small"
                                        placeholder="请输入手机号"
                                        maxlength="11"
                                        show-word-limit
                                        clearable
                                    />
                                </el-form-item>
                                <!-- <el-form-item
                                    label="联系人业务标识"
                                    prop="contact_info_arr_list"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="306"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            商户联系人业务标识,表示商户联系人的职责
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            :style="{left: '108px'}"
                                        >
                                            须知
                                        </el-button>
                                    </el-popover>
                                    <el-select
                                        v-model="option.tag"
                                        multiple
                                        placeholder="请选择"
                                        clearable
                                        size="small"
                                        collapse-tags
                                        style="width:100%"
                                    >
                                        <el-option
                                            v-for="item in tagList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item> -->
                                <el-form-item
                                    label="联系人邮箱"
                                    class="container-form-content-input"
                                >
                                    <el-popover
                                        placement="right"
                                        width="289"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            用于接收支付宝的邮件及日常业务通知
                                        </p>
                                        <el-button
                                            slot="reference"
                                            type="text"
                                            class="container-form-tip"
                                            :style="{left: '77px'}"
                                        >
                                            须知
                                        </el-button>
                                    </el-popover>
                                    <el-input
                                        v-model="option.email"
                                        size="small"
                                        placeholder="选填"
                                        clearable
                                        style="width:100%"
                                    />
                                </el-form-item>
                                <p
                                    class="zd-user-list-delete"
                                    @click="fnRemoveUser(index)"
                                    v-if="index > 0"
                                >
                                    删除
                                </p>
                                <p
                                    class="zd-user-list-delete"
                                    v-if="index == 0"
                                    style="opacity:0"
                                >
                                    删除
                                </p>
                            </div>
                            <div
                                class="zd-user-add"
                                @click="fnAddUser()"
                            >
                                <i class="el-icon-plus" />
                                新增商户联系人
                            </div>
                        </div>

                        <!-- 结算账户信息 -->
                        <div
                            class="container-form-head"
                            :style="{ paddingTop: 22 + 'px' }"
                        >
                            <p class="container-form-head-titles">
                                结算账户信息
                                <span style="color:#999;font-size:14px;margin-left:11px">
                                    此处设置的账户为：买家通过支付宝付款的金额再账期之后自动到达的账户
                                </span>
                            </p>
                        </div>
                        <div class="container-form-content">
                            <el-form-item
                                label="支付宝账号"
                                prop="alipay_logon_id"
                                class="container-form-content-input"
                            >
                                <el-popover
                                    placement="right"
                                    width="484"
                                    trigger="hover"
                                    popper-class="container-form-provide"
                                >
                                    <p class="container-form-provide">
                                        1、请输入你的支付宝账号，此账号用作结算账号<br>
                                        2、本账号要求与你以上填写的商户名称同名，且必须是实名认证支付宝账户
                                        3、需填写支付宝账号，非绑定手机号
                                    </p>
                                    <el-button
                                        slot="reference"
                                        type="text"
                                        class="container-form-tip"
                                        :style="{left: '77px'}"
                                    >
                                        要求
                                    </el-button>
                                </el-popover>
                                <el-input
                                    v-model="ruleForm.alipay_logon_id"
                                    size="small"
                                    placeholder="请填写支付宝账号"
                                    maxlength="64"
                                    show-word-limit
                                    clearable
                                />
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
            <!-- phone code -->
            <div class="container-phone">
                <p class="container-phone-title">
                    短信验证码
                </p>
                <div class="container-phone-wrap">
                    <el-input
                        size="small"
                        placeholder="请输入短信验证码"
                        class="container-phone-wrap-code"
                        style="width:281px"
                        v-model="ruleForm.finance_phone_verify_code"
                    />
                    <el-button
                        type="primary"
                        class="container-phone-wrap-button"
                        @click="fnSendBindCode"
                        style="width:120px;height:36px;margin-left:30px"
                        :disabled="sendCode"
                    >
                        {{ !sendCode ? sendText : codeTime + 's' }}
                    </el-button>
                </div>
                <p class="container-phone-desc">
                    点击获取验证码，短信将发送到您绑定的手机号：{{ finance_phone }}，请注意查收
                </p>
            </div>

            <!-- button -->
            <div class="container-button">
                <el-button
                    type="default"
                    size="small"
                    style="width:120px;height:36px;margin-left:32px"
                    @click="fnSave()"
                >
                    保存
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="width:120px;height:36px;margin-left:32px"
                    @click="fnSubmit('ruleFormAlipay')"
                >
                    提交
                </el-button>
            </div>
        </div>

        <!-- 提交成功 -->
        <div
            v-if="alipay_flag === 1"
            class="container-flex"
        >
            <div class="container-success">
                <img
                    src="@/assets/image/withdrawal-success.png"
                    alt="加载失败"
                    class="container-success-logo"
                >
                <p class="container-success-title">
                    提交成功
                </p>
                <p class="container-success-desc">
                    资料已提交审核，支付宝官方将第一时间审核，请耐心等待。
                </p>
                <p class="container-success-desc">
                    审核完成后，我们将短信通知您
                </p>
            </div>
            <el-button
                size="small"
                class="container-success-button"
                type="default"
                @click="()=>{
                    this.$router.push({
                        name: 'accountSetting'
                    })
                }"
            >
                返回首页
            </el-button>
        </div>

        <!-- 审核失败-->
        <div
            v-if="alipay_flag === -1"
            class="container-flex"
        >
            <div class="container-success">
                <img
                    src="@/assets/image/fail.png"
                    alt="加载失败"
                    class="container-success-logo"
                >
                <p class="container-success-title">
                    审核未通过
                </p>
                <p
                    class="container-success-desc"
                    v-for="(item,index) in audit_fail_reason"
                    :key="index"
                >
                    {{ item }}
                </p>
            </div>
            <el-button
                size="small"
                class="container-success-button"
                type="default"
                @click="()=>{
                    alipay_flag = 0;
                }"
            >
                重新填写
            </el-button>
        </div>

        <!-- 审核通过 -->
        <div
            class="container-flex"
            v-if="alipay_flag == 2"
        >
            <div class="container-success">
                <img
                    src="@/assets/image/withdrawal-success.png"
                    alt="加载失败"
                    class="container-success-logo"
                >
                <p class="container-success-title">
                    审核通过
                </p>
                <p class="container-success-desc">
                    您的资料信息已经审核完毕，快去签约账户吧～
                </p>
            </div>
            <el-button
                size="small"
                class="container-success-button"
                type="primary"
                style="color:#fff"
                @click="()=>{
                    alipay_flag = -2;
                    poly_flag = true;
                }"
            >
                去完成签约
            </el-button>
        </div>

        <!-- 支付宝签约 -->
        <div
            v-if="poly_flag"
            class="container-flex"
        >
            <div class="container-poly">
                <p class="container-poly-title">
                    支付宝签约
                </p>
                <p
                    class="container-poly-desc"
                    :style="{color: 'rgba(238, 78, 89, 1)'}"
                >
                    请按照下方操作流程进行签约，并完成协议签约确认。协议签约确认后，我们将第一时间把结果短信告知于您
                </p>
                <p class="container-poly-line" />
                <div
                    v-for="(item,index) in alipayPoly"
                    :key="index"
                >
                    <p
                        class="container-poly-step"
                        v-html="item.title"
                    >
                        <!-- {{ item.title }} -->
                    </p>
                    <p class="container-poly-line-next" />
                    <img
                        :src="item.url"
                        alt="加载失败"
                        class="container-poly-image"
                        @click="fnPreviewImg(item.url)"
                    >
                </div>
            </div>
            <div class="container-poly-wrap">
                <div
                    class="container-poly-button"
                    @click="fnGoPoly()"
                >
                    去签约
                </div>
            </div>
        </div>

        <!-- 签约完成 -->
        <div
            class="container-flex"
            v-if="alipay_flag == 3"
        >
            <div class="container-success">
                <img
                    src="@/assets/image/withdrawal-success.png"
                    alt="加载失败"
                    class="container-success-logo"
                >
                <p class="container-success-title">
                    签约完成
                </p>
                <p class="container-success-desc">
                    恭喜您签约完成，可以去查看新商城财务系统了
                </p>
            </div>
            <el-button
                size="small"
                class="container-success-button"
                type="primary"
                style="color:#fff"
                @click="()=>{
                    this.$router.push({
                        name: 'accountSetting'
                    })
                }"
            >
                返回首页
            </el-button>
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import getFinanerPhone from '@/assets/mixin/check-info';
export default {
    mixins: [getFinanerPhone],
    components: {
        imgPreview
    },
    data () {
        const validateAddress = (rule, value, callback) => {
            let flag = true;

            this.business_address.forEach(item => {
                if(!item) {
                    flag = false;
                }
            });

            if(flag) {
                callback();
            } else {
                callback(new Error('请选择商户经营地址'));
            }
        };

        const validateCartNo = (rule, value, callback) => {
            if(value) {
                callback();
            }

            if(!value) {
                if(this.ruleForm.cert_type == '201') {
                    callback(new Error('请填写营业执照编号'));
                } else {
                    callback(new Error('请填写统一社会信用代码'));
                }
            }
        };

        const validateQuali = (rule, value, callback) => {
            let flag = true;

            this.ruleForm.qualifications.forEach(item => {
                if(this.watch_flag) {
                    if(!item.industry_qualification_type || !item.industry_qualification_image_url) {
                        flag = false;
                    }
                }
            });

            if(flag) {
                callback();
            } else {
                callback(new Error('请完善行业资质信息'));
            }
        };

        const validateArrlist = (rule, value, callback) => {
            let flag = true;
            let list = JSON.parse(JSON.stringify(this.ruleForm.contact_info_arr_list));

            for(let key=0; key <list.length; key++) {
                let reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

                if(!reg.test(list[key].email) && list[key].email !== '') {
                    callback('请填写正确的邮箱');
                    return;
                }

                if(this.watch_flag) {
                    if(!list[key].type || !list[key].name || !list[key].phone) {
                        flag = false;
                    }
                }
            }

            if(flag) {
                callback();
            } else {
                callback(new Error('请完善商户联系人信息'));
            }
        };


        return {
            uploadFlag: false,
            watch_flag: false,
            checkTime: 'time',
            alipayPoly: [{
                title: '第一步：点击<a href="https://b.alipay.com/index2.htm" target="_blank" style="color:rgba(32, 160, 255, 1)">https://b.alipay.com/index2.htm</a>(或点击屏幕下方"去签约"按钮),进行支付宝商家中心,然后使用手机支付宝进行扫码登录',
                url: '//cdn.zsdx.cn/wei/images/hire/manage/alipay1-new.png'
            },{
                title: '第二步：登录后，点击顶部的产品中心',
                url: '//cdn.zsdx.cn/wei/images/hire/manage/alipay2-new.png'
            },{
                title: '第三步：有待处理事项，请点击“产品签约管理”按钮',
                url: '//cdn.zsdx.cn/wei/images/hire/manage/alipay3-new.png'
            },{
                title: '第四步：找到“支付宝收单结算”服务(开放)，进行签署协议确认',
                url: '//cdn.zsdx.cn/wei/images/hire/manage/alipay4-new.png'
            }],
            poly_flag: false,//签约状态
            audit_fail_reason: [],//审核失败原因
            step: 1,//步骤条状态
            alipay_flag: 0,//0:待提交 1:待审核 2:待签约 3:已完成 -1:已驳回
            ruleForm: {
                merchant_type: '',//主体类型
                name: '',//商户名称
                alias_name: '',//商户别名
                mcc: '',//商户类别码
                cert_no: '',//商户证件编号
                cert_type: '',//商户证件类型，取值范围：201：营业执照；2011:营业执照(统一社会信用代码)；204：民办非企业登记证书；206：社会团体法人登记证书；218：事业单位法人证书；219：党政机关批准设立文件/行政执法主体资格证；100：个人商户身份证
                cert_name: '',//个体工商户营业执照上的名称
                cert_image_url: '',//营业执照图片url
                cert_image_oss_key: '',//营业执照图片oss_key
                legal_cert_type: "100",//100 大陆身份证；105 港澳居民往来内地通行证；106 台湾同胞往来大陆通行证；108 外国人居留证
                legal_name: '',//法人名称
                legal_cert_no: '',//法人身份证号
                legal_cert_front_image_url: '',//法人身份证正面url
                legal_cert_front_image_oss_key: '',//法人身份证正面oss_key
                legal_cert_back_image_url: '',//法人身份证反面url
                legal_cert_back_image_oss_key: '',//法人身份证反面oss_key
                contact_info_arr_list: [{
                    type: '',
                    name: '',
                    phone: '',
                    tag: [],
                    email: ''
                }],//联系人信息, json字符串, [{"type":"联系人类型，取值范围：LEGAL_PERSON：法人；CONTROLLER：实际控制人；AGENT：代理人；OTHER：其他","tag":[" 商户联系人业务标识,表示商户联系人的职责。 02:异议处理接口人; 06:商户关键联系人; 11:数据反馈接口人; 08:服务联动接口人 "],"name":"姓名","phone":"手机号","email":"邮箱"}]
                alipay_logon_id: '',//支付宝id
                business_address_province_code: '',//地址省份地区码
                business_address_city_code: '',//地址城市地区码
                business_address_district_code: '',//地址区域地区码
                business_address_address: '',//地址详细地址
                qualifications: [{
                    industry_qualification_type: '',
                    industry_qualification_image_url: '',
                    industry_qualification_image_oss_key: ''
                }],//行业资质, json字符串, [{"industry_qualification_type":"商户行业资质类型","industry_qualification_image_url":"商户行业资质图片url","industry_qualification_image_oss_key":"商户行业资质图片oss_key"}]
                apply: '',//类型, 1:发起申请, 0:仅保存
                finance_phone_verify_code: ''//财务手机验证码, 验证码type=103
            },
            mccList: [],//商户经营类目数据列表
            businessList: [],//省市列表
            business_address: [],//商户经营地址
            mccData: [],//商户经营类目选择数据
            update: true, //更新上传图片组件
            imageIndex: '', //查询上传图片索引
            changeImgIndex: '',//行业资质动态商城图片
            flag: false,//查询商品经营类目是否为特殊行业
            certList: [],//资质类别
            certFlag: false,//是否可编辑经营者/法人证件类型
            rules: {
                merchant_type: [
                    { required: true, message: '请选择主体类型', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请填写商户名称', trigger: 'change' }
                ],
                alias_name: [
                    { required: true, message: '请填写商户别名', trigger: 'change' }
                ],
                mcc: [
                    { required: true, message: '请选择经营类目', trigger: 'change' }
                ],
                cert_type: [
                    { required: true, message: '请选择商户证件类型', trigger: 'change' }
                ],
                cert_no: [
                    // { required: true, message: '请填写营业执照编号', trigger: ['change', 'blur'] }
                    { validator: validateCartNo, trigger: ['blur', 'change'] },
                    { required: true, trigger: ['blur', 'change'] }
                ],
                business_address_province_code: [
                    { validator: validateAddress, trigger: 'change' },
                    { required: true, message: '请填写商户经营地址', trigger: 'change' }
                ],
                qualifications: [
                    { validator: validateQuali, trigger: 'change' },
                    { required: true, trigger: 'change' }
                ],
                contact_info_arr_list: [
                    { validator: validateArrlist, trigger: ['blur', 'change'] },
                    { required: true, trigger: ['blur', 'change'] }
                ],
                cert_name: [
                    { required: true, message: '请填写个体工商户营业执照上的名称', trigger: 'change' }
                ],
                cert_image_url: [
                    { required: true, message: '请上传营业执照图片', trigger: ['change', 'blur'] }
                ],
                legal_cert_type: [
                    { required: true, message: '请选择身份证类型', trigger: 'change' }
                ],
                legal_name: [
                    { required: true, message: '请填写姓名', trigger: 'change' }
                ],
                legal_cert_no: [
                    { required: true, message: '请填写身份证号', trigger: 'change' }
                ],
                legal_cert_front_image_url: [
                    { required: true, message: '请上传图片', trigger: 'change' }
                ],
                legal_cert_back_image_url: [
                    { required: true, message: '请上传图片', trigger: 'change' }
                ],
                alipay_logon_id: [
                    { required: true, message: '请填写支付宝账号', trigger: 'change' }
                ],
                business_address_address: [
                    { required: true, message: '请填写详细地址', trigger: 'change' }
                ]
            },
            organizationType: [{
                value: '01',
                label: '企业'
            },{
                value: '07',
                label: '个体工商户'
            },{
                value: '06',
                label: '个人商户'
            }],
            certTypeList: [{
                value: "100",
                label: '大陆身份证'
            },{
                value: "105",
                label: '港澳居民往来内地通行证'
            },{
                value: "106",
                label: '台湾同胞往来大陆通行证'
            },{
                value: "108",
                label: '外国人居留证'
            }],
            arrList: [{
                value: 'LEGAL_PERSON',
                label: '法人'
            },{
                value: 'CONTROLLER',
                label: '实际控制人'
            },{
                value: 'AGENT',
                label: '代理人'
            },{
                value: 'OTHER',
                label: '其它'
            }],
            tagList: [{
                value: '02',
                label: '异议处理接口人'
            },{
                value: '06',
                label: '商户关键联系人'
            },{
                value: '11',
                label: '数据反馈接口人'
            },{
                value: '08',
                label: '服务联动接口人'
            }],
            //获取验证码字段
            finance_phone: '',//财务手机号
            sendCode: false,
            computedTime: 'time',
            sendText: '获取验证码',
            codeTime: 60,
        };
    },
    created () {
        if(process.client){
            this.$store.commit('theme/SET_HEADER', [
                {title: '商城模块'},
                {title: '商城财务', path: '/manage/market/finance'},
                {title: '支付宝账户设置'}
            ]);
        }
    },
    mounted () {
        this.init();
    },
    watch: {
        alipay_flag (val) {
            if(val !== 2) {
                clearTimeout(this.checkTime);
            }
        },
        ruleForm: {
            handler: function (val, oldVal) {
                this.$nextTick(()=>{
                    if(this.watch_flag) {
                        this.$refs['ruleFormAlipay'].validate((valid) => {});
                    }
                });
            },
            deep: true
        }
    },
    methods: {
        /**
         * @description 初始化表单数据
         * @param   {Function}      fnGetApplyResult       //查询表单状态
         * @param   {Function}      fnGetmccList           //商户类别码
         * @param   {Function}      getCodeList            //商户类别码
         * @param   {Function}      getCertList            //资质类别数据
         * @param   {Function}      getData                //获取支付宝提交数据
         * @param   {Function}      getFinanerPhone        //获取财务手机号
         */
        init () {
            this.fnGetApplyResult();
            this.fnGetmccList();
            this.getCodeList();
            this.getCertList();
            this.getData();
            this.getFinanerPhone(resp=>{
                if(resp && resp.phone) {
                    this.finance_phone = resp.phone;
                }
            });
        },

        /**
         * @description 查询表单状态
         *      0:待提交, 1:待审核, 2:待签约, 3:已完成, -1:已驳回
         */
        fnGetApplyResult () {
            this.$post('/EcommerceAlipay/getApplyResult',{},resp=>{
                if(resp.code == 1) {
                    const step = resp.data.status;

                    this.alipay_flag = step;
                    this.audit_fail_reason = resp.data.status == -1 ? resp.data.audit_fail_reason : [];
                    this.step = (step == 0 || step == 1) ? 1 : (step == 2 ? 2 : (step == 3 ? 3 : 1));
                } else {
                    this.alipay_flag = 0;
                }
            });
        },

        /**
         * @description 获取表单数据
         */
        getData () {
            this.$post('/EcommerceAlipay/getApplyInfo',{},resp => {
                if(resp.code == 1) {
                    if(Object.prototype.toString.call(resp.data) == '[object Null]') {
                        return;
                    }

                    this.ruleForm = {
                        ...resp.data
                    };

                    // 商户经营类目
                    this.mccData = [undefined, undefined, resp.data.mcc];
                    this.fnCheckMc(this.mccData);
                    //商户经营地址
                    this.business_address = [resp.data.business_address_province_code, resp.data.business_address_city_code, resp.data.business_address_district_code];

                    this.ruleForm.legal_cert_type = resp.data.legal_cert_type ? resp.data.legal_cert_type : '100';

                    if(Object.prototype.toString.call(resp.data.qualifications) == '[object Null]' || (Array.isArray(resp.data.qualifications) && resp.data.qualifications.length == 0)) {
                        this.ruleForm.qualifications = [{
                            industry_qualification_type: '',
                            industry_qualification_image_url: '',
                            industry_qualification_image_oss_key: ''
                        }];
                    }

                    if(Object.prototype.toString.call(resp.data.contact_info_arr_list) == '[object Null]' || (Array.isArray(resp.data.contact_info_arr_list) && resp.data.contact_info_arr_list.length == 0)) {
                        this.ruleForm.contact_info_arr_list = [{
                            type: '',
                            name: '',
                            phone: '',
                            tag: [],
                            email: ''
                        }];
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交表单数据
         */
        fnSubmit (formName) {
            this.watch_flag = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(!this.ruleForm.finance_phone_verify_code) {
                        this.$notify({
                            title: '警告',
                            message: '财务手机验证码不可以为空',
                            type: 'warning'
                        });
                        return;
                    }

                    this.$confirm('一旦提交不可撤回，是否提交？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$post('/EcommerceAlipay/apply',{
                            ...this.ruleForm,
                            //覆盖提交数据
                            contact_info_arr_list: JSON.stringify(this.ruleForm.contact_info_arr_list),
                            qualifications: this.flag ? JSON.stringify(this.ruleForm.qualifications) : '',
                            apply: 1
                        },resp => {
                            if(resp.code == 1) {
                                this.$notify({
                                    title: '成功',
                                    message: '提交成功',
                                    duration: 2000,
                                    type: 'success'
                                });
                                this.alipay_flag = 1;
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: '请填写未通过的验证项',
                        type: 'warning'
                    });
                    return false;
                }
            });
        },

        /**
         * @description 保存数据
         */
        fnSave () {
            if(!this.ruleForm.merchant_type) {
                this.$notify({
                    title: '警告',
                    message: '主体类型不可以为空',
                    type: 'warning'
                });
                return;
            }

            if(!this.ruleForm.finance_phone_verify_code) {
                this.$notify({
                    title: '警告',
                    message: '财务手机验证码不可以为空',
                    type: 'warning'
                });
                return;
            }

            this.$post('/EcommerceAlipay/apply',{
                ...this.ruleForm,
                //覆盖修改的数据
                contact_info_arr_list: JSON.stringify(this.ruleForm.contact_info_arr_list),
                qualifications: JSON.stringify(this.ruleForm.qualifications),
                apply: 0
            },resp => {
                if(resp.code == 1) {
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 添加行业资质
         */
        fnAddQualification () {
            this.ruleForm.qualifications.push({
                industry_qualification_type: '',
                industry_qualification_image_url: '',
                industry_qualification_image_oss_key: ''
            });
        },

        /**
         * @description 删除行业资质
         */
        fnRemoveQualification (index) {
            this.ruleForm.qualifications.splice(index, 1);
        },

        /**
         * @description 添加商户联系人
         */
        fnAddUser () {
            this.ruleForm.contact_info_arr_list.push({
                type: '',
                name: '',
                phone: '',
                tag: [],
                email: ''
            });
        },

        /**
         * @description 删除商户联系人
         */
        fnRemoveUser (index) {
            this.ruleForm.contact_info_arr_list.splice(index, 1);
        },

        /**
         * @description 获取商户类别码
         */
        fnGetmccList () {
            this.$post('/EcommerceAlipay/getMccList',{},resp=>{
                if(resp.code == 1) {
                    this.mccList = resp.data.mcc_list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 发送验证码
         */
        fnSendBindCode () {
            this.sendCode = true;
            this.fnCompitedTime();
            this.$post('/FinanceUser/sendPhoneVerifyCode',{
                type: 103
            },resp=>{
                if (resp.code == 1) {
                    this.$notify({
                        title: '成功',
                        message: '发送成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
        * @description 计时器递归调用
        */
        fnCompitedTime (param) {
            let arr = Array.prototype.slice.call(arguments);

            if(this.codeTime == 60 || arr.length > 0) {
                clearTimeout(this.computedTime);
                this.computedTime = setTimeout(()=>{
                    if(this.codeTime > 0) {
                        this.codeTime--;
                        this.fnCompitedTime(1);
                    } else {
                        this.sendText = '再次发送';
                        this.sendCode = false;
                        this.codeTime = 60;
                        clearTimeout(this.computedTime);
                        return;
                    }
                },1000);
            }
        },


        /**
         * @description 获取省市编码列表
         */
        getCodeList () {
            this.$post('/EcommerceAlipay/getAddressCodeList',{},resp=>{
                if(resp.code == 1) {
                    let list = resp.data.province_list;

                    for(let i=0; i<list.length; i++) {
                        let cityList = list[i].city_list;

                        for(let j=0; j<cityList.length; j++) {
                            if(cityList[j].area_list) {
                                cityList[j].city_list = cityList[j].area_list;
                                delete cityList[j].area_list;
                            }
                        }
                    }
                    this.businessList = list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取城市编码
         */
        fnGetAdress (row) {
            if(row.length > 0) {
                row.forEach((item,index) => {
                    switch (index) {
                        case 0:
                            this.ruleForm.business_address_province_code = item;
                            break;
                        case 1:
                            this.ruleForm.business_address_city_code = item;
                            break;
                        case 2:
                            this.ruleForm.business_address_district_code = item;
                            break;
                        default:
                            break;
                    }
                });
            } else {
                this.ruleForm.business_address_district_code = this.ruleForm.business_address_city_code = this.ruleForm.business_address_province_code = '';
                this.$notify({
                    title: '警告',
                    message: '城市不可为空',
                    type: 'warning'
                });
            }
        },

        /**
         * @description 查询是否为特殊行业
         */
        fnCheckMc (row) {
            let list = JSON.parse(JSON.stringify(this.mccList));

            this.$set(this.ruleForm, 'mcc', row[row.length - 1]);

            if(this.ruleForm.mcc) {
                for(let i=0; i<list.length; i++) {
                    let children_list = list[i].children_list;

                    for(let j=0; j<children_list.length; j++) {
                        let data = children_list[j].children_list;

                        data.filter(item => {
                            if(item.code == this.ruleForm.mcc) {
                                this.flag = item.qualification_require_desc ? true : false;
                                return false;
                            }
                        });
                    }
                }
            } else {
                this.flag = false;
            }
        },

        fnCheckType (row) {
            this.certFlag = row == '06' ? true : false;
            if(this.flag) {
                this.$set(this.ruleForm, 'merchant_type', row);
            }
            this.ruleForm.name = row == '06' ? '': this.ruleForm.name;
        },


        /**
         * @description 预览图片
         */
        fnPreviewImg (url) {
            const type = Object.prototype.toString.call(url);

            if(type == '[object Array]') {
                let list = [];

                url.forEach(item=>{
                    list.push(item.url);
                });

                setTimeout(()=>{
                    this.$refs.preview.show(list,0);
                },100);
            } else if(type == '[object String]') {
                this.$refs.preview.show([
                    url
                ]);
            } else {
                this.$notify({
                    title: '警告',
                    message: '未知类型',
                    type: 'warning'
                });
            }
        },

        /**
         * @description 获取资质类别数据
         */
        getCertList () {
            this.$post('/EcommerceAlipay/getQualificationTypeList',{},resp => {
                if(resp.code == 1) {
                    this.certList = resp.data.mcc_list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 图片上传（营业执照扫描件）
         */
        fnUploadImage(e) {
            let pic = new FormData();

            pic.append('picture', e.file);
            this.$upload('/EcommerceAlipay/uploadPicture', pic,resp => {
                if (resp.code == 1) {
                    this.$set(this.ruleForm, 'cert_image_url', resp.data.url);
                    this.$set(this.ruleForm, 'cert_image_oss_key', resp.data.oss_key);
                    e.onSuccess({
                        url: resp.data.url,
                        status: 'success'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },
        fnUploadImageTo(e) {
            let pic = new FormData();

            pic.append('picture', e.file);
            this.$upload('/EcommerceAlipay/uploadPicture', pic,resp => {
                if (resp.code == 1) {
                    this.$set(this.ruleForm, 'legal_cert_front_image_url', resp.data.url);
                    this.$set(this.ruleForm, 'legal_cert_front_image_oss_key', resp.data.oss_key);
                    e.onSuccess({
                        url: resp.data.url,
                        status: 'success'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },
        fnUploadImageThree(e) {
            let pic = new FormData();

            pic.append('picture', e.file);
            this.$upload('/EcommerceAlipay/uploadPicture', pic,resp => {
                if (resp.code == 1) {
                    this.$set(this.ruleForm, 'legal_cert_back_image_url', resp.data.url);
                    this.$set(this.ruleForm, 'legal_cert_back_image_oss_key', resp.data.oss_key);
                    e.onSuccess({
                        url: resp.data.url,
                        status: 'success'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },
        fnUploadImageFore (e) {
            let pic = new FormData();

            pic.append('picture', e.file);
            this.$upload('/EcommerceAlipay/uploadPicture', pic,resp => {
                if (resp.code == 1) {
                    this.ruleForm.qualifications[this.changeImgIndex].industry_qualification_image_url = resp.data.url;
                    this.ruleForm.qualifications[this.changeImgIndex].industry_qualification_image_oss_key = resp.data.oss_key;
                    e.onSuccess({
                        url: resp.data.url,
                        status: 'success'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },

        /**
         * @description 去签约
         */
        fnGoPoly () {
            this.checkStatus();
            window.open('https://b.alipay.com/index2.htm');
        },

        /**
         * @description 实时查询签约状态
         */
        checkStatus () {
            this.$post('/EcommerceAlipay/getApplyResult',{},resp=> {
                if(resp.code == 1) {
                    const step = resp.data.status;

                    if(step !== 3) {
                        this.checkTime = setTimeout(()=>{
                            this.checkStatus();
                        },3000);
                    }

                    if(step == 3) {
                        this.poly_flag = false;
                        this.alipay_flag = this.step = 3;
                        clearTimeout(this.checkTime);
                    }
                } else {
                    this.alipay_flag = 0;
                }
            });
        },

        /**
         * @description 复制
         */
        copySuccess(e){
            this.$message({
                center: true,
                message: '复制成功',
                type: 'success'
            });
        },
        copyErr(e){
            console.log(e);
            this.$notify({
                title: '',
                message: '复制失败，请稍后重试',
                duration: 2000,
                type: 'warning'
            });
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 0px 44px 0px;
    margin-top: 0 !important;
    background: #ffffff;
    .container-fail {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 12px 32px;
        line-height: 22px;
        flex-wrap: wrap;
        background-color: #ffffff;
        .el-icon-warning {
            color: #FF3030;
            font-size: 14px;
            margin-right: 12px;
        }
        &-text {
            color: #FF3030;
            font-size: 14px;
        }
        &-seat {
            width: 100%;
            height: 10px;
            background-color: #F0F2F7;
        }
    }
    .container-header {
        padding: 24px 0 24px 24px;
        color: #3F454B;
        font-size: 24px;
        font-weight: 500;
        border-bottom: 1px #F0F2F7 solid;
        margin-bottom: 32px;
    }
    .container-step {
        width: 100%;
        padding: 20px 32px 18px 32px;
    }
    .container-form {
        width: calc(100% - 64px);
        margin: 0 auto;
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        box-sizing: border-box;
        padding: 32px;
        display: flex;
        flex-direction: column;
        &-head {
            width: 100%;
            position: relative;
            box-sizing: border-box;
            &-title {
                color: #3F454B;
                font-size: 18px;
                font-weight: 500;
            }
            &-titles {
                color: #333333;
                font-size: 16px;
                padding-bottom: 16px;
                font-weight: 500;
            }
            &-desc {
                color: #999999;
                font-size: 14px;
                margin: 14px 0 24px 0;
            }
            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 1px;
                background-color: #EBEEF5;
            }
        }
        &-fix {
            height: 14px;
            margin: 16px 0 20px 0;
            display: flex;
            align-items: center;
            &-title {
                color: #333333;
                font-size: 14px;
                position: relative;
                margin-left: 10px;
                &::after {
                    position: absolute;
                    content: '*';
                    font-size: 14px;
                    color: #FF3030;
                    left: -6px;
                    top: 0;
                }
            }
            &-desc{
                color: #999999;
                font-size: 14px;
                margin-left: 10px;
            }
        }
        &-input {
            width: 332px;
            height: 36px;
        }
        &-tip {
            margin-left: 16px;
            text-decoration: underline;
        }
        &-upload {
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            &-img {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            &-price {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 4;
            }
            &-change {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                opacity: 0;
            }
            &-create {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.5);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 12;
                cursor: pointer;
                .el-icon-delete {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 18px;
                }
                .el-icon-zoom-in {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        &-uploadImg {
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
            margin-right: 20px;
            &-price {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 5;
            }
            &-create {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.5);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 12;
                cursor: pointer;
                .el-icon-delete {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 18px;
                }
                .el-icon-zoom-in {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        &-titleDesc {
            position: absolute;
            left: 120px;
            top: -40px;
            color: #999999;
            font-size: 14px;
            white-space: nowrap;
        }
        &-uploadImg:hover .container-form-uploadImg-create{
            display: flex;
        }
        &-card {
            width:160px;
            height:136px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px solid rgba(238,238,238,1);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 14px;
            &-border {
                width: 136px;
                height: 84px;
            }
            &-img {
                width: 120px;
                height: 68px;
                position: absolute;
                left: 20px;
                top: 22px;
            }
            &-price {
                width: 120px;
                height: 68px;
                position: absolute;
                left: 20px;
                top: 22px;
                z-index: 8;
            }
            &-change {
                width: 160px;
                height: 136px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                opacity: 0;
            }
            &-create {
                width: 160px;
                height: 136px;
                position: absolute;
                // left: 20px;
                // top: 22px;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.5);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 12;
                cursor: pointer;
                .el-icon-delete {
                    font-size: 16px;
                    color: #ffffff;
                    margin-right: 18px;
                }
                .el-icon-zoom-in {
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        &-content {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            &-input{
                width: calc((100% - 64px)/3);
                margin-right: 32px;
                margin-top: 10px;
                position: relative;
            }
            &-input:nth-child(5){
                width: auto;
            }
            .container-form-tip {
                position: absolute;
                top: -40px;
                left: 77px;
                z-index: 99;
            }
            .length {
                width: auto;
            }
        }
        .zd-user-list {
            flex-wrap: nowrap;
            display: flex;
            align-items: center;
            .container-form-content-input{
                width: calc((100% - 100px)/4) !important;
                margin-left: 24px;
                position: relative;
                margin-right: 0px;
                margin-top: 0px;
            }
            &-delete {
                cursor: pointer;
                color: #20A0FF;
                font-size: 14px;
                margin-left: 12px;
                white-space: nowrap;
                margin-top: 24px;
            }
        }
        .zd-user-add {
            height:36px;
            border-radius:4px;
            border:1px dashed rgba(184,184,184,1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            color: #20A0FF;
            margin-left: 24px;
            margin-right: -2px;
            cursor: pointer;
            .el-icon-plus {
                color: #20A0FF;
                font-size: 14px;
                margin-right: 10px;
                font-weight: 500;
            }
        }
        &-upload:hover .container-form-upload-create{
            display: flex;
        }
        &-card:hover .container-form-card-create{
            display: flex;
        }
    }
    .container-phone {
        width: calc(100% - 64px);
        margin: 0px auto;
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        box-sizing: border-box;
        padding: 24px 32px;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 36px;
        &-title {
           color: #333333;
           font-size: 14px;
           position: relative;
           margin-left: 4px;
           &::before {
               content: '*';
               position: absolute;
               left: -8px;
               top: 1px;
               font-size: 14px;
               color: #FF3030;
           }
        }
        &-wrap {
            margin-top: 12px;
            height: 36px;
            display: flex;
            align-items: center;
            &-input {
                width: 281px;
                height: 36px;
            }
            &-button {
                width: 120px;
                height: 36px;
                border-radius:0px 4px 4px 0px;
                position: relative;
                left: -5px;
                color: #ffffff;
                font-size: 14px;
                line-height: 11px;
            }
        }
        &-desc {
            color: #666666;
            font-size: 12px;
            margin-top: 14px;
            margin-bottom: 36px;
        }
    }
    .container-button {
        height: 36px;
        display: flex;
        padding-left: 32px;
    }
    .container-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        .container-poly {
            width: calc(100% - 64px);
            margin: 0 auto;
            margin-top: 20px;
            background:rgba(251,251,251,1);
            border:1px solid rgba(238,238,238,1);
            padding: 32px;
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
            &-title {
                color: #3F454B;
                font-size: 18px;
                font-weight: 500;
                margin-bottom: 10px;
            }
            &-desc {
               color: #999999;
               font-size: 14px;
               line-height: 22px;
               margin-bottom: 20px;
            }
            &-line {
                width: 100%;
                height: 1px;
                background:rgba(235,238,245,1);
                margin-bottom: 32px;
            }
            &-step {
               color: #333333;
               font-size: 16px;
               font-weight: 500;
            }
            &-line-next {
                width: 100%;
                height: 1px;
                background:rgba(235,238,245,1);
                margin-bottom: 16px;
                margin-top: 16px;
            }
            &-image {
                // width: 100%;
                width: 506px;
                margin-bottom: 52px;
                cursor: pointer;
            }
        }
        .container-poly-wrap {
            width: calc(100% - 217px);
            position: fixed;
            right: 7px;
            bottom: 0;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow:0px -2px 4px 0px rgba(0,0,0,0.11);
            background:rgba(255,255,255,1);
            .container-poly-button {
                width: calc(100% - 128px);
                height:40px;
                background:rgba(32,160,255,1);
                border-radius:4px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
        }
        .container-success {
            width: calc(100% - 64px);
            margin: 0 auto;
            margin-top: 47px;
            background:rgba(251,251,251,1);
            border:1px solid rgba(238,238,238,1);
            padding: 117px 0 103px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            &-logo {
                width: 72px;
                height: 72px;
            }
            &-title {
                color: #000000;
                font-size: 20px;
                font-weight: 500;
                margin: 24px 0;
            }
            &-desc {
            color: #333333;
            font-size: 16px;
            white-space: nowrap;
            margin-bottom: 14px;
            }
        }
        .container-success-button {
            width: 120px;
            height: 36px;
            margin: 0 auto;
            margin-top: 52px;
            margin-bottom: 85px;
            color: #606972;
        }
    }
    .container-cation {
        width: calc(100% - 64px);
        margin: 0 auto;
        margin-top: 47px;
        background:rgba(251,251,251,1);
        border:1px solid rgba(238,238,238,1);
        padding: 32px;
        display: flex;
        flex-direction: column;
        &-title {
            color: #3F454B;
            font-size: 18px;
        }
        &-desc {
            color: #999999;
            font-size: 14px;
            padding: 16px 0;
            line-height: 22px;
            border-bottom: 1px #EBEEF5 solid;
        }
        &-wrap {
            width: 100%;
            background:rgba(255,255,255,1);
            border:1px solid rgba(238,238,238,1);
            box-sizing: border-box;
            padding: 16px 32px 36px 32px;
            display: flex;
            margin-top: 32px;
            flex-direction: column;
            align-items: center;
            .container-left, .container-right {
                width: 50%;
                display: flex;
                flex-direction: column;
                &-head {
                    color: #333333;
                    font-size: 16px;
                    font-weight: 500;
                    padding: 16px 0;
                    border-bottom: 1px #EBEEF5 solid;
                    margin-bottom: 20px;
                   &-desc {
                       color: #999999;
                       font-size: 14px;
                       margin-left: 12px;
                   }
                }
                &-info {
                    display: flex;
                    height: 14px;
                    margin-bottom: 18px;
                    &-title {
                        min-width: 100px;
                        color: #333333;
                        font-size: 14px;
                        line-height: 22px;
                        text-align: right;
                        margin-right: 16px;
                    }
                    &-titlert {
                        color: #333333;
                        font-size: 14px;
                        line-height: 22px;
                        min-width: 108px;
                        text-align: right;
                        margin-right: 16px;
                    }
                    &-content {
                        color: #3F454B;
                        font-size: 14px;
                        width: 100%;
                        line-height: 22px;
                        cursor: pointer;
                    }
                }
            }
            .container-cation-wrap-deadline {
                color: #EE4E59;
                font-size: 20px;
                font-weight: 500;
                margin: 0 auto;
                margin-top: 46px;
                margin-bottom: 14px;
            }
            .container-cation-wrap-foot {
                color: #333333;
                font-size: 14px;
                margin: 0 auto;
            }
        }
        &-code {
            width: 294px;
            height: 294px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 32px;
            background-color: #ffffff;
            &-img {
                width: 262px;
                height: 262px;
            }
        }
        .container-cation-code-desc {
            color: #666666;
            font-size: 14px;
            margin-top: 20px;
        }
    }
    .container-cation-foot {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 36px;
        margin-top: 32px;
    }
    .zd-qualifications {
        width: 100%;
        box-sizing: border-box;
        background:rgba(247,247,247,1);
        padding: 16px 32px 32px 32px;
        &-title {
            font-size: 16px;
            color: #333333;
            font-weight: 500;
            width: 100%;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px #EBEEF5 solid;
            margin-bottom: 16px;
        }
        &-add {
            width: 100%;
            height:36px;
            border-radius:4px;
            border:1px dashed rgba(184,184,184,1);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #20A0FF;
            font-size: 14px;
            cursor: pointer;
            margin-top: 24px;
            font-weight: 500;
            .el-icon-plus {
                font-size: 14px;
                cursor: pointer;
                margin-right: 14px;
                font-weight: 500;
            }
        }
        .qualifications-list {
            width: 100%;
            height: 174px;
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            &-left {
                flex: 1;
                height: 100%;
                background:rgba(247,247,247,1);
                border:1px solid rgba(220,223,230,1);
                padding-left: 24px;
            }
            &-right {
                width: 72px;
                height: 174px;
                padding-left: 20px;
                box-sizing: border-box;
                line-height: 174px;
                cursor: pointer;
                color: #20A0FF;
            }
        }
        .qualifications-list:last-child{
            margin-bottom: 0px;
        }
    }
    .zd-user {
        width: 100%;
        background:rgba(247,247,247,1);
        border:1px solid rgba(238,238,238,1);
        margin-top: 16px;
        box-sizing: border-box;
        padding: 0 24px 32px 0px;
        &-list {
            width: 100%;
            display: flex;
            box-sizing: border-box;
        }
    }
}

// provide样式
.container-form-provide {
    padding: 11px 18px;
    color: #666666;
    font-size: 12px;
    line-height: 20px;
    span {
        color: #333333;
        font-weight: 500;
    }
}

</style>

<style lang="less">
.account-form {
    .el-step .iconfont {
        font-size: 10px;
    }
    .el-form--label-top .el-form-item__label {
        color: #333333;
        padding: 5px 0 0px;
    }
    .el-input__inner {
        height: 36px;
        line-height: 36px;
        border: 1px solid #DCDFE6 !important;
        background: #FBFBFB;
        &:hover {
            border: 1px solid rgba(193,196,203) !important;
        }
    }
    .el-upload--picture-card {
        width: 100px;
        height: 100px;
    }
    .container-form-card .el-upload--picture-card {
        width: 160px;
        height: 136px;
    }
    .el-radio {
        width: 332px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        border: 1px solid #DCDFE6 !important;
        padding-left: 20px;
        &:hover {
            border: 1px solid rgba(193,196,203) !important;
        }
    }
    .el-cascader {
        width: 332px;
    }
    .el-textarea__inner {
        background-color: #FBFBFB;
    }
    .el-form-item__error {
        white-space: nowrap;
    }
    .el-select__tags>span {
        display: flex;
    }
}
</style>